<template>
  <view class="checkout">
    <view class="navigation">
      <view class="navigation_back" @tap="backref()">
        <uni-icons type="back" size="24" color="#333"></uni-icons>
      </view>
      <view class="navigation_title"> 产品详情 </view>
    </view>
    <view class="checkout_con">
      <template>
        <view class="content">
          <view class="checkout_con_bt">
            <picker
              @change="bindPickerChange"
              :value="index"
              :range="typeList"
              range-key="name"
            >
              <!-- <view style="padding: 20rpx;background-color: white;">{{ addressList[index].userAddress || '请选择地址' }}</view> -->
              <view class="checkout_con_remark">
                <view class="checkout_bt_label">
                  {{ currentType.name || "请选择所属分类" }}
                </view>
                <view class="checkout_bt_input">
                  <uni-icons type="forward" size="20"></uni-icons>
                </view>
              </view>
            </picker>
          </view>
          <view class="checkout_con_bt">
            <view class="checkout_con_remark">
              <view class="checkout_bt_label"> 产品名称 </view>
              <view class="checkout_bt_input">
                <input
                  type="text"
                  v-model="detail.name"
                  placeholder="请输入产品名称"
                  placeholder-class="placeholder"
                />
              </view>
            </view>
          </view>
          <view class="checkout_con_bt">
            <view class="checkout_con_remark">
              <view class="checkout_bt_label"> 产品价格 </view>
              <view class="checkout_bt_input">
                <input
                  type="text"
                  v-model="detail.price"
                  placeholder="请输入产品价格"
                  placeholder-class="placeholder"
                />
              </view>
            </view>
          </view>
          <view class="checkout_con_bt">
            <view class="checkout_con_remark">
              <view class="checkout_bt_label">
                {{ detail.saleClose == 1 ? "售卖中" : "已售罄" }}
              </view>
              <view class="checkout_bt_input">
                <switch
                  color="#ff8d1a"
                  :checked="detail.saleClose == 1"
                  @change="(e) => (detail.saleClose = e.detail.value ? 1 : 2)"
                />
              </view>
            </view>
          </view>
          <view class="checkout_con_bt">
            <view class="checkout_con_remark">
              <view class="checkout_bt_label"> 产品照片 </view>
              <view class="imgUpload" @click="uploadImg()">
                <span v-if="!detail.goodsImg">选择照片</span>
                <image
                  v-else
                  style="height: 100px; width: 100px"
                  :src="img"
                  mode=""
                >
                </image>
              </view>
            </view>
          </view>
          <view class="pay_btn" v-if="id" style="margin-top: 20px">
            <button @tap="deleteFn()">删除</button>
          </view>
          <view style="margin-top: 20px">
            <button
              style="background-color: rgba(255, 141, 26, 1)"
              type="primary"
              @tap="submit()"
            >
              提交
            </button>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import server_url from "../../api/config.js";
import {
  getProDetail,
  addProduction,
  updateProduction,
  deleteProduction,
  getStoreType,
} from "../../api/api.js";
export default {
  data() {
    return {
      img: "",
      detail: {
        goodsImg: "",
        name: "",
        price: "",
        categotyId: "",
        saleClose: 1,
      },
      domain: server_url,
      id: "",
      remark: "",
      typeList: [],
      index: 0,
      currentType: {
        name: "",
        id: "",
      },
    };
  },
  methods: {
    deleteFn() {
      deleteProduction({
        id: this.id,
      }).then((res) => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 2000,
        });
        this.backref();
      });
    },
    submit() {
      this.detail.categotyId = this.currentType.id;
      if (this.id) {
        updateProduction(this.detail).then(() => {
          uni.showToast({
            title: "操作成功",
            icon: "none",
            duration: 2000,
          });
          this.backref();
        });
      } else {
        addProduction(this.detail).then((res) => {
          uni.showToast({
            title: "操作成功",
            icon: "none",
            duration: 2000,
          });
          this.backref();
        });
      }
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
      this.currentType = this.typeList[this.index];
    },
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      getProDetail({
        id: this.id,
      }).then((res) => {
        this.detail = res.data;
        this.img = this.domain + this.detail.goodsImg;
        setTimeout(() => {
          let index = this.typeList.findIndex(
            (dd) => dd.id == this.detail.categotyId
          );
          if (index !== -1) {
            this.currentType = this.typeList[index];
          }
        }, 300);
      });
    },
    uploadImg() {
      // 示例代码
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.showLoading();
          uni.uploadFile({
            url: this.domain + "/api/common/upload",
            filePath: tempFilePaths[0],
            name: "file",
            header: {
              token: uni.getStorageSync("token"),
            },
            success: (uploadFileRes) => {
              let data = JSON.parse(uploadFileRes.data);
              this.detail.goodsImg = data.fileName;
              this.img = this.domain + data.fileName;
              uni.hideLoading();
            },
          });
        },
      });
    },
    getType() {
      getStoreType().then((res) => {
        this.typeList = res.data;
      });
    },
  },
  onLoad(e) {
    if (e) {
      this.id = e.id;
      if (this.id) {
        this.getDetail();
      }
    }
    this.getType();
  },
};
</script>

<style lang="scss">
page {
  background: #f9fbfc;
}

.navigation {
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  width: 100%;
  height: 150rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: relative;

  .navigation_back {
    position: absolute;
    top: 60rpx;
  }

  .navigation_title {
    color: #333;
    font-size: 36rpx;
  }
}

.checkout_con {
  padding: 0 24rpx;

  .checkout_con_hd {
    padding: 0 32rpx;
    background-color: #fff;
    border-radius: 12rpx;

    .checkout_address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .checkout_time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;

      .checkout_label {
        display: flex;
        align-items: center;
      }

      .about_time {
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #ffb226;
      }

      .checkout_more {
        font-size: 30rpx;
        color: #2e343a;
        font-weight: 500;
      }
    }

    .checkout_label {
      font-size: 30rpx;
      color: #2e343a;
      font-weight: 500;
    }

    .checkout_more {
    }
  }

  .checkout_con_bd {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 20rpx;

    .checkout_store_hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_store_name {
        font-size: 30rpx;
        color: #2e343a;
        font-weight: 700;
      }

      .checkout_store_phone {
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .checkout_goods {
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_good {
        position: relative;
        padding: 24rpx 0;
        display: flex;

        .checkout_good_img {
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 12rpx;
          }
        }

        .checkout_good_info {
          padding-top: 15rpx;
          margin-left: 24rpx;

          .checkout_good_name {
            font-size: 28rpx;
            color: #2e343a;
            font-weight: 500;
          }

          .checkout_good_type {
            font-size: 24rpx;
            color: #9098a0;
            margin-top: 8rpx;
          }

          .checkout_good_other {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .checkout_good_price {
              font-size: 32rpx;
              color: #333333;
              font-weight: 500;
            }

            .checkout_good_num {
              font-size: 24rpx;
              color: #9098a0;
            }
          }
        }
      }
    }

    .checkout_money {
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_lunchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
      }

      .checkout_delivery {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
      }

      .checkout_money_label {
        font-size: 28rpx;
        color: #9098a0;
        font-weight: 500;
      }

      .checkout_money_price {
        font-size: 28rpx;
        color: #333333;
      }
    }

    .checkout_total_price {
      padding-top: 32rpx;
      text-align: right;
      font-size: 24rpx;
      color: #2e343a;

      text {
        font-size: 32rpx;
        color: #ff2626;
        font-weight: 500;
      }
    }
  }

  .checkout_con_bt {
    padding: 0 32rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 24rpx;

    .checkout_con_remark {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .checkout_con_tableware {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
    }

    .checkout_bt_label {
      color: #2e343a;
      font-weight: 500;
      font-size: 28rpx;
    }

    .checkout_bt_input {
      input {
        text-align: right;
        color: #2e343a;
        font-weight: 500;
        font-size: 28rpx;

        &.placeholder {
          color: #9098a0;
        }
      }
    }
  }

  .checkout_pay {
    position: relative;
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    border-radius: 100rpx;
    background-color: #3a3635;
    padding-left: 40rpx;

    .checkout_pay_price {
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 500;
    }

    .checkout_pay_btn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      color: #fff;
      top: 0;
      right: 0;
      width: 192rpx;
      height: 100rpx;
      border-top-right-radius: 100rpx;
      border-bottom-right-radius: 100rpx;
      background-color: #2588ff;
    }
  }
}
</style>
